import {ResultCode} from "../network.js";
import {SHA256} from "../../lib/sha256.js";
import popupInfo from "../components/popupInfo.js";

export default {
    components: {
        'popup-info': popupInfo,
    },
    setup() {
        const router = VueRouter.useRouter();
        console.log(router)
        // 拿到popup的dom
        const popup = Vue.ref(null);
        const verifyImg = Vue.ref("");
        const formUserId = Vue.ref("");
        const formUserId2 = Vue.ref("");
        const formUserName = Vue.ref("");
        const formUserAddress = Vue.ref("");
        const formUserGender = Vue.ref("请选择");
        const formPassword = Vue.ref("");
        const formPassword2 = Vue.ref("");
        const formVerifyCode = Vue.ref("");

        function showPopup(infoText_ = "提示", titleText_ = "提示") {
            popup.value.show(infoText_, titleText_);
        }

        function onVerifyImgClick() {
            axios.get("/verify_code")
                .then(response => {
                    verifyImg.value = response.data.data['img_base64'];
                });
        }

        Vue.onMounted(() => {
            onVerifyImgClick();
        });

        function submit() {
            console.log("submit");
            if (formUserId.value === "") {
                showPopup("请输入身份证号！");
                return;
            }
            if (formUserId2.value === "") {
                showPopup("请输入医保号！");
                return;
            }
            if (formUserName.value === "") {
                showPopup("请输入姓名！");
                return;
            }
            if (formUserAddress.value === "") {
                showPopup("请输入地址！");
                return;
            }
            if (formUserGender.value === "请选择") {
                showPopup("请选择性别！");
                return;
            }
            let password = formPassword.value;
            let password2 = formPassword2.value;
            if (password === "") {
                showPopup("请输入密码!");
                return;
            }
            if (password !== password2) {
                showPopup("两次输入的密码必须相同！");
                return;
            }
            let verifyCode = formVerifyCode.value;
            if (verifyCode === "") {
                showPopup("请输入验证码!");
                return;
            }
            const postInfo = {
                id: formUserId.value,
                id2: formUserId2.value,
                password: SHA256(password),
                gender: formUserGender.value === "男",
                address: formUserAddress.value,
                name: formUserName.value,
                verifyCode: verifyCode
            };
            axios.post("/user/new_account", postInfo)
                .then(r => {
                    if ((r.data.code & ResultCode.FAIL) === ResultCode.FAIL) {
                        onVerifyImgClick();
                        showPopup(r.data.message);
                    } else if (r.data.code === ResultCode.SUCCESS) {
                        popup.value.onConfirm = () => {
                            router.push({path: '/'});
                        };
                        showPopup("注册成功，点击确定进入登录界面");
                    }
                });
        }

        return {
            popup, showPopup, onVerifyImgClick, submit,
            verifyImg, formPassword, formUserId,
            formVerifyCode, router, formPassword2, formUserId2,
            formUserName, formUserAddress, formUserGender
        }
    },
    template: `
    <div class="container" style="height: 100%;">
    <popup-info
            ref="popup"
    ></popup-info>
    <div style="position: fixed;height: 100%;width: 100%;
    background: url('/images/background/login.png');background-size: 100% 100%;
    left: 0;top: 0;z-index: -1;
    "></div>
    <div class="row" style="height: 9%;"></div>
    <div class="row" style="height: 80%;">
        <div class="col-md-1">
        </div>
        <div class="col-md-4" style="background-color: #90b9d7; height: 100%;">
            <div class="pg-empty-placeholder"
                 style="background: url('/images/logo.png') no-repeat center center; background-size: contain; width: 100%; height: 35%;"></div>
            <h1 class="text-center my-font">系统简介</h1>
        </div>
        <div class="col-md-6 text-center" style="background-color: #EBF2F5; height: 100%;">
            <div>
                <h1 class="my-font" style="text-align: left;padding-left: 50px;font-size: 30px;">
                    注册
                </h1>
            </div>
            <form @submit.prevent="submit">
                <table class="table" style="margin-top: 15px;border-spacing: 10px 30px;">
                    <tbody>
                    <tr>
                        <td class="my-font" style="font-size: 20px;">用户类型</td>
                        <td colspan="2" class="my-font" style="font-size: 20px;">
                            普通用户（新入职的医生请联系管理员）
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="height: 100%; font-size: 20px;" class="my-font text-center">
                                身份证号
                            </div>
                        </td>
                        <td colspan="2">
                            <input type="text" v-model="formUserId"
                                   style="width: 100%; font-size: 20px; padding: 0;" class="my-font">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="height: 100%; font-size: 20px;" class="my-font text-center">
                                医保号
                            </div>
                        </td>
                        <td colspan="2">
                            <input type="text" v-model="formUserId2"
                                   style="width: 100%; font-size: 20px; padding: 0;" class="my-font">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="height: 100%; font-size: 20px;" class="my-font text-center">
                                姓名
                            </div>
                        </td>
                        <td colspan="2">
                            <input type="text" v-model="formUserName"
                                   style="width: 100%; font-size: 20px; padding: 0;" class="my-font">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="height: 100%; font-size: 20px;" class="my-font text-center">
                                地址
                            </div>
                        </td>
                        <td colspan="2">
                            <input type="text" v-model="formUserAddress"
                                   style="width: 100%; font-size: 20px; padding: 0;" class="my-font">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="height: 100%; font-size: 20px;" class="my-font text-center">
                                性别
                            </div>
                        </td>
                        <td colspan="2">
                            <select v-model="formUserGender"
                                style="width: 100%; height: 100%; font-size: 20px;" class="my-font text-center">
                                <option selected>
                                    请选择
                                </option>
                                <option>
                                    男
                                </option>
                                <option>
                                    女
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="my-font" style="font-size: 20px;">密码</td>
                        <td colspan="2">
                            <input v-model="formPassword"
                                   type="password" style="width: 100%; font-size: 20px; padding: 0;" class="my-font">
                        </td>
                    </tr>
                    <tr>
                        <td class="my-font" style="font-size: 20px;">确认密码</td>
                        <td colspan="2">
                            <input v-model="formPassword2"
                                   type="password" style="width: 100%; font-size: 20px; padding: 0;" class="my-font">
                        </td>
                    </tr>
                    <tr>
                        <td class="my-font" style="font-size: 20px;">验证码</td>
                        <td>
                            <input v-model="formVerifyCode"
                                   type="text" style="width: 100%;font-size: 20px; padding: 0;" class="my-font">
                        </td>
                        <td style="width: 35%;">
                            <img style="height: 100%" :src="verifyImg" @click="onVerifyImgClick">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <button style="width: 100%; background-color: #C7E4FBC2;
                             font-size: 20px; border: none;outline: none;border-radius: 10px;"
                              class="my-font">
                              注册
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </form>
        </div>
        <div class="col-md-1">
        </div>
    </div>
<!--    <div>-->
<!--        {{formUserType}}<br>-->
<!--        {{formUserLoginType}}<br>-->
<!--        {{formUserId}}<br>-->
<!--        {{formPassword}}<br>-->
<!--        {{formVerifyCode}}-->
<!--    </div>-->
    </div>`
}